<template>
    <div>
        <div class="outer">
        </div>
        <div class="container_outer">
            <div class="container">
                <div class="row">
                    <div class="calc_box col-md-12">
                        <i class="fa fa-remove btn_close" aria-hidden="true" @click="close_calc"></i>
                        <form class="row calc_form" method="post">
                            <div class="col-md-6 left_part">
                                <div class="row">
                                    <div class="mb-2 col-md-9 col-md-offset-3 text-left number_of_customers">
                                        今天已经有1800位业主获取来装修预算
                                    </div>
                                    <div class="mb-2 col-md-12">
                                        <XsgRegion @update="fillOrder"></XsgRegion>
                                    </div>
                                    <div class="mb-2 col-md-12">
                                        <div class="row form-group">
                                            <div class="col-md-3 text-right">房屋面积</div>
                                            <div class="mb-3 col-md-9 house_sqr">
                                                <input type="text" v-model="order.sqm" class="form-control" name="sqm" placeholder="㎡"
                                                       data-bv-notempty="true"
                                                       data-bv-stringlength="true"
                                                       data-bv-stringlength-min="1"
                                                       data-bv-stringlength-max="10"
                                                       data-bv-regexp="true"
                                                       data-bv-regexp-regexp="^[1-9]+[\.]?[1-9]*$"
                                                       data-bv-regexp-message="请输入正确的平方数"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="md-2 col-md-12">
                                        <div class="row">
                                            <div class="col-md-3 text-right mb-3">房屋户型</div>
                                            <div class="col-md-9">
                                                <div class="row">
                                                    <div class="col-md-4 mb-3">
                                                        <select v-model="order.bedroom" class="form-control">
                                                            <option :key="key" v-for="(bedroom, key) in bedrooms">{{order.bedroom}}</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <select v-model="order.livingroom" class="form-control">
                                                            <option :key="key" v-for="(livingroom, key) in livingrooms">{{order.livingroom}}</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <select v-model="order.kitchen" class="form-control">
                                                            <option :key="key" v-for="(kitchen, key) in kitchens">{{order.kitchen}}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-5 col-md-offset-3 mb-3">
                                                        <select v-model="order.bathroom" class="form-control">
                                                            <option :key="key" v-for="(bathroom, key) in bathrooms">{{order.bathroom}}</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <select v-model="order.balcony" class="form-control">
                                                            <option :key="key" v-for="(balcony, key) in balconies">{{order.balcony}}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-2 col-md-12">
                                        <div class="row form-group">
                                            <div class="col-md-3 text-right mb-3">手机号码</div>
                                            <div class="col-md-9 mb-3">
                                                <input type="text" v-model="order.phone" class="form-control" name="phone" placeholder="请输入..."
                                                       data-bv-notempty="true"
                                                       data-bv-regexp="true"
                                                       data-bv-regexp-regexp="^1[34578]\d{9}$"
                                                       data-bv-regexp-message="请输入正确的手机号码"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-2 col-md-offset-3 col-md-9 privacy number_of_customers text-left">
                                        为了您的权益，您的隐私将被严格保密!
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 right_part">
                                <div class="row">
                                    <div class="mb-3 col-md-12 budget_div text-center">
                                        您家的装修预算 <span class="budget_span">{{budget}}</span> 元
                                    </div>
                                    <div class="mb-2 col-md-7 col-md-offset-3 fee_container">
                                        <div class="row mt-3 mb-3">
                                            <div class="col-md-4">
                                                材料费
                                            </div>
                                            <div class="col-md-4">
                                                {{material_fee}}
                                            </div>
                                            <div class="col-md-4">
                                                元
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                人工费
                                            </div>
                                            <div class="col-md-4">
                                                {{worker_fee}}
                                            </div>
                                            <div class="col-md-4">
                                                元
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                设计费
                                            </div>
                                            <div class="col-md-4">
                                                {{design_fee}}
                                            </div>
                                            <div class="col-md-4">
                                                元
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                质检费
                                            </div>
                                            <div class="col-md-4">
                                                {{check_fee}}
                                            </div>
                                            <div class="col-md-4">
                                                元
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-7 col-md-offset-3 description">
                                        装修预算数据由本公司装修平台历史服务上千万业主装修数据、各大城市装修公司合同数据经过大数据实时分析计算。
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="btn_calc_container">
                            <div class="btn_calc">
                                <div>
                                    <div>
                                        开始
                                    </div>
                                    <div>
                                        计算
                                    </div>
                                </div>
                            </div>
                            <div class="animated">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import XsgRegion from '@/components/XsgRegion'
import OrderServices from '@/services/OrderServices'

export default {
  name: 'Calc',
  props: {
    toggle_if_show_calc: {
      type: Function
    }
  },
  data () {
    return {
      bedrooms: ['1室', '2室', '3室', '4室', '5室', '6室'],
      livingrooms: ['1厅', '2厅', '3厅', '4厅', '5厅', '6厅'],
      kitchens: ['1厨', '2厨', '3厨'],
      balconies: ['1阳台', '2阳台', '3阳台', '4阳台', '5阳台', '6阳台'],
      bathrooms: ['1卫', '2卫', '3卫', '4卫', '5卫', '6卫'],
      order: {
        province: '上海市',
        city: '上海市',
        area: '松江区',
        bedroom: '2室',
        livingroom: '1厅',
        kitchen: '1厨',
        balcony: '1阳台',
        bathroom: '1卫',
        sqm: '',
        phone: ''
      },
      budget: 99999,
      material_fee: 10000,
      worker_fee: 10000,
      design_fee: 10000,
      check_fee: 10000
    }
  },
  created: function () {
    var vm = this
    setInterval(function () {
      vm.budget = _.random(10000, 200000)
      vm.material_fee = _.random(10000, 20000)
      vm.worker_fee = _.random(10000, 20000)
      vm.design_fee = _.random(10000, 20000)
      vm.check_fee = _.random(10000, 20000)
    }, 500)
  },
  components: {
    XsgRegion
  },
  mounted: function () {
    var vm = this
    $('.calc_form').bootstrapValidator()
    $('.btn_calc').click(function () {
      var $form = $('.calc_form').trigger('submit')
      if ($form.find('.has-error').length === 0) {
        vm.submitForm()
      }
    })
  },
  methods: {
    close_calc: function () {
      this.toggle_if_show_calc()
    },
    async submitForm () {
      try {
        const response = await OrderServices.submitOrder(this.order)
        if (response.status === 200) { alert('订单提交成功，请耐心等待客服与您联系！') }
        this.toggle_if_show_calc()
      } catch (e) {
        this.error = e.response.data.error
      }
    },
    fillOrder: function (region) {
      Object.assign(this.order, region)
    }
  }
}
</script>

<style scoped>
    .outer {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 999;
        background-color: black;
        opacity: 0.5;
    }

    .container_outer {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 100%;
    }

    .container {
        margin-top: 10%;
    }

    .calc_box {
        position: relative;
        z-index: 1001;
        background-color: white;
        margin: 0 auto;
    }

    .btn_close {
        font-size: 28px;
        cursor: pointer;
        position: absolute;
        right: 5px;
        top: 5px;
    }

    form {
        padding: 20px;
    }

    .number_of_customers {
        color: orangered;
    }

    .privacy {
        font-size: 12px;
    }

    .btn_calc_container {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -25px;
        z-index: 999;
        cursor: pointer;
    }

    .btn_calc {
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        font-size: 15px;
        text-align: center;
        background-color: #FF5900;
        position: relative;
        z-index: 99;
    }

    .animated {
        position: absolute;
        top: 0;
        border-radius: 25px;
        width: 50px;
        height: 50px;
        background-color: #FF5900;
        -webkit-animation: scale-three2 1.5s ease infinite;
        -moz-animation: scale-three2 1.5s ease infinite;
        -o-animation: scale-three2 1.5s ease infinite;
        animation: scale-three2 1.5s ease infinite;
        animation-fill-mode: both
    }

    @keyframes scale-three2 {
        0% {
            transform: scale(1);
            opacity: .8;
        }

        100% {
            transform: scale(1.5);
            opacity: 0;
        }
    }

    @-webkit-keyframes scale-three2 {
        0% {
            -webkit-transform: scale(1);
            opacity: .7
        }

        100% {
            -webkit-transform: scale(1.5);
            opacity: 0
        }
    }

    @-moz-keyframes scale-three2 {
        0% {
            -moz-transform: scale(1);
            opacity: .7
        }

        100% {
            -moz-transform: scale(1.5);
            opacity: 0
        }
    }

    @-o-keyframes scale-three2 {
        0% {
            -o-transform: scale(1);
            opacity: .7
        }

        100% {
            -o-transform: scale(1.5);
            opacity: 0
        }
    }

    .btn_calc > div {
        position: relative;
        top: 2px;
    }

    .budget_div {
        font-size: 20px;
    }

    .budget_span {
        font-size: 30px;
        color: #ff5900;
    }

    .fee_container {
        border: 1px solid #ddd;
    }

    .description {
        font-size: 14px;
    }

    .right_part {
        border-left: 1px solid #eee;
    }

    .left_part > .row {
        padding-right: 30px;
    }
</style>
